<template>
  <div class="store">
    <Card>
      <div slot="title" class="t-title">
        <span>店铺管理</span>
        <el-button size="medium" type="primary" @click="saveStore">保存</el-button>
      </div>
      <div slot="content">
        <el-form ref="store" :model="storeData" label-width="80px">
          <el-form-item label="店铺名称">
            <el-input v-model="storeData.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="店铺公告">
            <el-input type="textarea" v-model="storeData.bulletin"></el-input>
          </el-form-item>
          <el-form-item label="店铺头像">
            <el-upload class="avatar-uploader" action="http://127.0.0.1:5000/shop/upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="storeData.avatar" :src="imgBaseUrl+storeData.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="店铺图片">
            <el-upload action="http://127.0.0.1:5000/shop/upload" list-type="picture-card" :file-list="fileList" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handlePictureCardSuccess">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="起送价格">
            <el-input v-model="storeData.minPrice" clearable></el-input>
          </el-form-item>
          <el-form-item label="配送费">
            <el-input v-model="storeData.deliveryPrice" clearable></el-input>
          </el-form-item>
          <el-form-item label="配送时间">
            <el-input v-model="storeData.deliveryTime" clearable></el-input>
          </el-form-item>
          <el-form-item label="配送描述">
            <el-input v-model="storeData.description" clearable></el-input>
          </el-form-item>
          <el-form-item label="店铺评分">
            <el-input v-model="storeData.score" clearable></el-input>
          </el-form-item>
          <el-form-item label="销量">
            <el-input v-model="storeData.sellCount" clearable></el-input>
          </el-form-item>
          <el-form-item label="活动">
            <el-checkbox-group v-model="storeData.supports">
              <el-checkbox label="在线支付满28减5" name="activity"></el-checkbox>
              <el-checkbox label="VC无限橙果汁全场8折" name="activity"></el-checkbox>
              <el-checkbox label="单人精彩套餐" name="activity"></el-checkbox>
              <el-checkbox label="特价饮品8折抢购" name="activity"></el-checkbox>
              <el-checkbox label="单人特色套餐" name="activity"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="营业时间">
            <el-date-picker v-model="storeData.date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </Card>

  </div>
</template>

<script>
import Card from "@/components/Card";
import { getInfo_api, editStore_api } from "@/api/store.js";
export default {
  components: {
    Card,
  },
  data() {
    return {
      storeData: {
        supports: [],
      }, //必须先给个supports:[],不给的话会报length的错误
      dialogImageUrl: "",
      fileList: [], //{name:,url:}//前端需要展示的缩略图
      dialogVisible: false, //弹窗关闭状态
      imgBaseUrl: "http://127.0.0.1:5000/upload/shop/",
    };
  },
  methods: {
    //店铺头像
    //照片上传成功的钩子
    handleAvatarSuccess(res, file) {
      this.storeData.avatar = res.imgUrl;
    },
    //照片上传前的钩子
    beforeAvatarUpload(file) {
      const isJPG = file.type.includes("image");
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是照片");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //店铺照片墙
    //照片上传成功的钩子
    handlePictureCardSuccess(res, file) {
      //将上传的照片的给前端fileList
      this.fileList.push({
        name: res.imgUrl,
        url: this.imgBaseUrl + res.imgUrl,
      });
      //将上传的照片添加到要发给后端的数据pics
      this.storeData.pics.push(res.imgUrl);
    },
    //照片移除的钩子
    handleRemove(file, fileList) {
      console.log(file, fileList);
      //将删除的给前端fileList
      this.fileList = fileList;
      //别忘记改变要发给后端数据的pics
      //flie删除的图片，fileList剩下的图片
      this.storeData.pics = fileList.map((item) => {
        return item.name;
      });
    },
    //点击照片列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //获取店铺详情
    async getInfo() {
      let res = await getInfo_api();
      res.data.data.pics.map((item, index) => {
        this.fileList.push({ name: item, url: this.imgBaseUrl + item });
      });
      this.storeData = res.data.data;
    },
    //保存
    async saveStore() {
      let res = await editStore_api({
        id: this.storeData.id,
        name: this.storeData.name,
        bulletin: this.storeData.bulletin,
        avatar: this.storeData.avatar,
        deliveryPrice: this.storeData.deliveryPrice,
        deliveryTime: this.storeData.deliveryTime,
        description: this.storeData.description,
        score: this.storeData.score,
        sellCount: this.storeData.sellCount,
        supports: JSON.stringify(this.storeData.supports),
        date: JSON.stringify(this.storeData.date),
        pics: JSON.stringify(this.storeData.pics),
      });
      console.log(res);
    },
  },
  created() {
    this.getInfo();
  },
};
</script>

<style lang="less" scoped>
.store {
  .t-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /deep/.el-form {
    width: 550px;
  }

  /deep/.el-textarea__inner {
    height: 130px;
  }

  //头像

  /deep/.avatar-uploader {
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
  }

  /deep/.avatar-uploader {
    .el-upload:hover {
      border-color: #409eff;
    }
  }
  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  /deep/.avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  /deep/.el-upload--picture-card {
    width: 130px;
    height: 130px;
    line-height: 132px;
  }
  /deep/.el-upload-list__item {
    width: 130px;
    height: 130px;
  }
}
</style>